<template>
  <div>
    <x-header title="选择城市" @on-click-back="goback">
    </x-header >

        <group>
          <cell-box>
            <!--        可以知道slot意思就是只能有一个关是-->
            <div>
              <div class="defaute">
                当前定位
              </div>
              <div class="place">北京</div>
            </div>
          </cell-box>
          <cell-box>
            <!--        可以知道slot意思就是只能有一个关是-->
            <div>
              <div class="defaute" id="hot">
                热门城市
              </div>
              <div class="place" @click="goMap('AREA|88cff55c-aaa4-e2e0','北京')">北京</div>
            </div>

          </cell-box>
          <cell-box>
            <div class="place" @click="goMap('AREA|dbf46d32-7e76-1196','上海')">上海</div>
          </cell-box>


          <div v-for="(val,index) in cityList">
            <!--        可以知道slot意思就是只能有一个关是-->
            <cell-box>
              <div style="display: flex;flex-direction: column">
              <div class="firstletter" ref="firstletter" :id="val.name">
                {{val.name}}
              </div>

              <div class="place" @click="goMap(val.citys[0].code,val.citys[0].name)">
                {{val.citys[0].name}}
              </div>
              </div>
            </cell-box>
              <cell-box v-for="(item,index) in val.citys" v-if="index!=0">
              <div class="place"  @click="goMap(item.code)">{{item.name}}</div>
              </cell-box>
          </div>
        </group>


<!--        显示字母表 -->
        <ul>
          <li :class="{ choosed: selected==null}" @click="changeSelect()">
            <a href="#hot" >热</a>
          </li>
          <li  :class="{choosed: selected==city}" v-for="city in cityList" @click="changeSelect(city)">
            <a :href="'#'+city.name">{{city.name}}</a>
          </li>

        </ul>




  </div>
</template>

<script>
  import {Group,Cell} from 'vux'
  import XHr from "vux/src/components/x-hr/index";
  import CellBox from "vux/src/components/cell-box/index";
  import XHeader from "vux/src/components/x-header/index";
  import Flexbox from "vux/src/components/flexbox/flexbox";
  import FlexboxItem from "vux/src/components/flexbox/flexbox-item";

  export default {
        name: "ChooseList",
        components: {FlexboxItem, Flexbox, XHeader, CellBox, XHr,Group},
        data(){
          return {
            cityList: null,
            selected: ""
          }
        },
    methods: {
      goback(){
        //利用编程式路由回去



      },
      goMap(code,name){
         var storage=window.localStorage;
         storage["cityName"]=name
        this.$router.push("/Map/"+code)

  },
      changeSelect(city){
          this.selected=city
      }
    },
        mounted() {
          //渲染后
          var citylist = this.$http.loadData("/cities/cityList").then(
            (res)=>{
              this.cityList=res.data.cityDTOS
            }
          )
            //同步代码，成加载页面
        },

  }

</script>

<style scoped lang="less">
  @fontSize: 0.72rem; //通用的大小
  @lineHeight: 1.2rem;
  .choosed{
    width: 0.8rem;
    height: 0.8rem;
    background-color: #42b983;
    border-radius: 50%;
  }

    ul{
      padding:0px;
      width: 0.72rem;
      position: fixed;
      top: 1rem;
      left: 14rem;

      li {
        a{
          color: rgba(0,0,0,0.3);
          text-decoration: none;
        }
        line-height: 0.8rem;
        text-align: center;
        width: 0.8rem;
        height: 0.8rem;
        color: rgba(0,0,0,0.3);
        list-style-type: none;
        font-size: @fontSize;
        margin-bottom: 0.25rem;
      }

    }
    .firstletter{
      line-height: @lineHeight;
      color: rgba(0,0,0,0.3);
      font-size: @fontSize;
    }
    .defaute{
      width: 100%;
      color: rgba(0,0,0,0.3);
      font-size: @fontSize * 5 / 6;
      line-height: @lineHeight;
    }
    .place{
      width: 100%;
      line-height: @lineHeight;
      font-size: @fontSize;
    }
</style>
